<template>
  <div>
    <el-descriptions title="" :column="2" border size="mini">
      <template slot="extra">
        <el-button type="primary" size="mini" @click="handleRegionParamsEdit">编辑</el-button>
      </template>

      <el-descriptions-item label="抄表频率（月/次）" :labelStyle="customLabelStyle">
        {{ getZoneTagValue('readFrequent') }}
      </el-descriptions-item>
      <el-descriptions-item label="抄表日期(1-28)" :labelStyle="customLabelStyle">
        {{ getZoneTagValue('readDate') }}
      </el-descriptions-item>
      <el-descriptions-item label="建设状态" :labelStyle="customLabelStyle">
        {{ getZoneTagValue('status') }}
      </el-descriptions-item>
      <el-descriptions-item label="规划或建设日期" :labelStyle="customLabelStyle">
        {{ getZoneTagValue('StartDate') }}
      </el-descriptions-item>
      <el-descriptions-item label="建成日期" :labelStyle="customLabelStyle">
        {{ getZoneTagValue('FinishDate') }}
      </el-descriptions-item>
      <el-descriptions-item label="分区负责人" :labelStyle="customLabelStyle">
        {{ getZoneTagValue('director') }}
      </el-descriptions-item>
      <el-descriptions-item label="管网长度（公里）" :labelStyle="customLabelStyle">
        {{ getZoneTagValue('pipeLength') }}
      </el-descriptions-item>
      <el-descriptions-item label="用户支管数量（个）" :labelStyle="customLabelStyle">
        {{ getZoneTagValue('branchAmount') }}
      </el-descriptions-item>
      <el-descriptions-item label="用户支管平均长度（米）" :labelStyle="customLabelStyle">
        {{ getZoneTagValue('branchLength') }}
      </el-descriptions-item>
      <el-descriptions-item label="日平均供水时长（小时）" :labelStyle="customLabelStyle">
        {{ getZoneTagValue('supplyTime') }}
      </el-descriptions-item>
      <el-descriptions-item label="有无压力设备" :labelStyle="customLabelStyle">
        {{ getZoneTagValue('pressureEquipment') === '1' ? '有' : getZoneTagValue('pressureEquipment') === '0' ? '无' : '' }}
      </el-descriptions-item>
      <el-descriptions-item label="无压力设备时的平均压力值（MPa）" :labelStyle="customLabelStyle">
        {{ getZoneTagValue('pressure') }}
      </el-descriptions-item>
      <el-descriptions-item label="目标漏损率（%）" :labelStyle="customLabelStyle">
        {{ getZoneTagValue('lsl') }}
      </el-descriptions-item>
      <el-descriptions-item label="目标产销差率（%）" :labelStyle="customLabelStyle">
        {{ getZoneTagValue('cxcl') }}
      </el-descriptions-item>
    </el-descriptions>

    <el-dialog title="更新分区参数" :visible.sync="open" width="750px" :close-on-click-modal="false" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="150px">
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="抄表频率（月/次）" prop="readFrequent">
              <el-input-number v-model="form.readFrequent" :min="1" :max="12" placeholder="请输入抄表频率"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="抄表日期(1-28)" prop="readDate">
              <el-input-number v-model="form.readDate" :min="1" :max="28" placeholder="请输入抄表日期"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="规划或建设日期	" prop="startDate">
              <el-date-picker v-model="form.startDate" type="date" style="width: 100%;"
                              placeholder="请选择规划或建设日期"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="建成日期" prop="finishDate">
              <el-date-picker v-model="form.finishDate" type="date" style="width: 100%;" placeholder="请选择建成日期"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="建设状态" prop="status">
              <el-select v-model="form.status" placeholder="请选择建设状态">
                <el-option label="规划" value="规划">规划</el-option>
                <el-option label="建设" value="建设">建设</el-option>
                <el-option label="完成" value="完成">完成</el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="分区负责人" prop="director">
              <el-input v-model="form.director" placeholder="请输入分区负责人"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="管网长度(公里)" prop="pipeLength">
              <el-input v-model="form.pipeLength" placeholder="请输入管网长度"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户支管数量" prop="branchAmount">
              <el-input-number v-model="form.branchAmount" :min="0" placeholder="请输入用户支管数量"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="用户支管平均长度(米)" prop="branchLength">
              <el-input v-model="form.branchLength" placeholder="请输入用户支管平均长度"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="日平均供水时长(小时)" prop="supplyTime">
              <el-input-number v-model="form.supplyTime" :precision="1" :step="0.1" :min="0" :max="24"
                               placeholder="请输入日平均供水时长"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="有无压力设备" prop="pressureEquipment">
              <el-radio-group v-model="form.pressureEquipment" placeholder="请选择">
                <el-radio label="1">有</el-radio>
                <el-radio label="0">无</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="无压力设备时的平均压力值(MPa)" prop="pressure">
              <el-input-number v-model="form.pressure" :precision="2" :step="0.1" :min="0" :max="1.0"
                               :disabled="form.pressureEquipment==undefined || form.pressureEquipment==='1'"
                               placeholder="请输入无压力设备时的平均压力值"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="目标漏损率(%)" prop="lsl">
              <el-input-number v-model="form.lsl" :min="0" :max="100" placeholder="请输入目标漏损率"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="目标产销差率(%)" prop="cxcl">
              <el-input-number v-model="form.cxcl" :min="0" :max="100" placeholder="请输入目标产销差率"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getZoneTagByAreaId, updateZoneTag} from '@/api/leakage/zoneTag'

export default {
  name: "RegionParameters",
  data() {
    return {
      editingZoneObj: undefined,
      editingZoneTagObj: undefined,
      customLabelStyle: {width: '25%', textAlign: 'right'},
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        tenantId: [
          {required: true, message: "设备归属租户不能为空", trigger: "blur"}
        ],
        AreaID: [
          {required: true, message: "大分区的ID不能为空", trigger: "blur"}
        ],
      }
    }
  },
  methods: {
    updateEditingZone(zone) {
      this.editingZoneObj = zone
      this.form.tenantId = zone.tenantId
      this.form.areaId = zone.areaId
      this.form.areaName = zone.areaName
      this.loadZoneTagData()
    },
    loadZoneTagData() {
      getZoneTagByAreaId({areaId: this.editingZoneObj.areaId}).then(res => {
        this.editingZoneTagObj = res.data
        this.form = Object.assign({}, res.data)
      })
    },
    getZoneTagValue(key) {
      return this.editingZoneTagObj != undefined ? this.editingZoneTagObj[key] : ''
    },
    handleRegionParamsEdit() {
      if (this.editingZoneTagObj === undefined) {
        this.$message.error('请先在左侧区域树选择分区')
      } else {
        this.open = true
      }
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateZoneTag(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.loadZoneTagData();
            });
          }
        }
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        tenantId: null,
        pid: null,
        pName: null,
        areaID: null,
        areaName: null,
        levelType: null,
        changeTime: null,
        readFrequent: null,
        readDate: null,
        status: null,
        startDate: null,
        finishDate: null,
        director: null,
        pipeLength: null,
        branchAmount: null,
        branchLength: null,
        pressureEquipment: null,
        pressure: null,
        supplyTime: null,
        icf: null,
        homeuserAmount: null,
        otherAmount: null,
        homeuserQuota: null,
        otherQuota: null,
        readMode: null,
        lsl: null,
        cxcl: null,
        gpipeLength: null
      };
      this.resetForm("form");
    },
  }
}
</script>

<style scoped>

</style>
